<template>
  <div class="container">
    <headerBar title="选择销售单" @changeLan="changeLan"></headerBar>
    <div class="all" :style="{paddingTop: pdt+'px'}">
      <div class="page__bd" style="width: 100%;">
        <div class="weui-search-bar">
          <div class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
              <input
                type="text"
                class="weui-search-bar__input"
                :placeholder="local.searchSupplier"
                v-model="inputVal"
                :focus="inputShowed"
                @input="inputTyping"
              />
              <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
                <icon type="clear" size="14"></icon>
              </div>
            </div>
            <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <div class="weui-search-bar__text">{{local.search}}</div>
            </label>
          </div>
          <div
            class="weui-search-bar__cancel-btn"
            :hidden="!inputShowed"
            @click="hideInput"
          >{{local.cancel}}</div>
        </div>
      </div>
      <div class="filter">
        <div class="filter-left">
          <div>{{local.screen}}：</div>
          <picker
            class="weui-btn"
            mode="date"
            :value="date"
            start="1999-01-01"
            end="2099-01-01"
            @change="TimeChange"
          >
            <div>{{local.time}}</div>
          </picker>
          <div>|</div>
          <div @click="routerToUrl('../../pages/selectSupplier/index')">{{local.supplier}}</div>
        </div>
        <div class="clear-filter">{{local.clearfilter}}</div>
      </div>
      <div class="stock-in-list">
        <div
          class="stock-in-record"
          @click="setLogisticsSale(item.id)"
          v-for="(item, i) in logisticsList"
          :key="i"
        >
          <div class="record-Number">
            <div class="a">{{local.stockInNo}}：{{item.orderCode}}</div>
            <div class="b">{{item.createTime}}</div>
          </div>
          <div class="record-supplier">
            <span>{{local.customer}}：</span>
            <div>{{item.customerName}}</div>
          </div>
          <div class="record-goods">
            <span>{{local.commodityNumber}}：</span>
            <div>{{item.goodsId}}</div>
          </div>
          <div class="record-warehouse">
            <span>{{local.goodsCount}}：</span>
            <div>{{item.goodsCount}}{{local.piece}}</div>
          </div>
          <div class="record-warehouse">
            <span>{{local.warehouseOut}}：</span>
            <div>{{item.warehouseName}}</div>
          </div>
          <div class="record-warehouse">
            <span>{{local.status}}：</span>
            <div>{{item.status}}</div>
          </div>
          <div class="record-warehouse">
            <span>发货时间：</span>
            <div>{{item.createTime}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="modalRight" v-if="modalFlagRight" catchtouchmove="true">
      <div class="dialog">
        <div class="tip-name">{{local.salesOrderNo}}:</div>
        <input v-model="code" />
        <div class="tip-name">{{local.selectSupplier}}:</div>
        <input @click="supplierHandler()" v-model="mydata.name" />
        <div class="tip-name">{{local.selectTime}}:</div>
        <picker
          class="weui-btn flex"
          mode="date"
          :value="date"
          start="1999-01-01"
          end="2099-01-01"
          @change="DateChange"
        >
          <input disabled v-model="startTimeFormat" />
        </picker>
        <div class="tip-name">-</div>
        <picker
          class="weui-btn flex"
          mode="date"
          :value="date"
          start="1999-01-01"
          end="2099-01-01"
          @change="DateChangeEnd"
        >
          <input disabled v-model="endTimeFormat" />
        </picker>
        <div class="btn">
          <div class="cancel-btn" @click="closeDialogRight">{{local.cancel}}</div>
          <div class="confirm-btn" @click="searchBytip()">{{local.confirm}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { formatTime } from '@/utils/index'
import home from '@/api/home'
import headerBar from '@/components/headerBar'
export default {
  components: {
    headerBar
  },
  onShow () {
    this.initLang()
    this.logisticsSaleOrderList()
  },
  onLoad (options) {
    this.initLang()
    this.pdt = this.globalData.CustomBar
    this.customerId = options.customerId
  },
  computed: {
    startTimeFormat(){
      return this.startTime ? wx.$timeFormat(this.startTime) : '' //new Date(this.startTime).$format('dd/MM/yyyy') : ''
    },
    endTimeFormat(){
      return this.endTime ? wx.$timeFormat(this.endTime) : '' //new Date(this.endTime).$format('dd/MM/yyyy') : ''
    }
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
    },
    DateChange (e) {
      this.startTime = e.mp.detail.value
    },
    DateChangeEnd (e) {
      this.endTime = e.mp.detail.value
    },
    supplierHandler () {
      // 跳转到 供应商列表
      wx.navigateTo({
        url: `../../pages/selectSupplier/index?name=supplier`
      })
    },
    initMyData(){
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      let myData = currPage.data.mydata;
      this.mydata.id = myData.id || ''
      this.mydata.name = myData.name || ''
    },
    // 清空搜索条件
    clearChoose () {
      this.startTime = ''
      this.endTime = ''
      this.code = ''
      this.supplierId = ''
      this.getDraftList()
    },
    openDialogRight () {
      this.modalFlagRight = true
    },
    closeDialogRight () {
      this.modalFlagRight = false
    },
    async searchBytip () {
      // 这里面是查询, 供应商选择需要跳转到新的客户选择
      const { rows, code } = await home.logisticsSaleOrderList({code: this.code, startTime: this.startTime, endTime: this.endTime, supplierId: this.mydata.id})
      this.listData = rows
      if (code == 0) {
        this.modalFlagRight = false
      }
      if (this.listData.length == 0) {
        // block
        this.isBlock = true
      }
    },
    setLogisticsSale (id) {
      wx.navigateTo({
        url: '../../pages/addLogistics/index'
      })
      this.logisticsList.map((item) => {
        if (item.id == id) {
          wx.setStorageSync('setLogisticsSaleTop', item)
        }
      })
    },
    async logisticsSaleOrderList () {
      const {rows} = await home.logisticsSaleOrderList({customerId: 140})
      this.logisticsList = rows
    },
    changeLan (val) {
      this.local = val
    },
    routerToUrl (url) {
      wx.navigateTo({
        url
      })
    },
    TimeChange (e) {
    },
    showInput () {
      this.inputShowed = true
    },
    hideInput () {
      this.inputVal = ''
      this.inputShowed = false
    },
    clearInput () {
      this.inputVal = ''
    },
    inputTyping (e) {
      this.inputVal = e.mp.detail.value
    }
  },
  data () {
    return {
      mydata: {
        id: '',
        name: ''
      },
      code: '',
      endTime: '',
      startTime: '',
      modalFlagRight: false,
      pdt: 66,
      logisticsList: [],
      local: wx.getStorageSync('local'),
      inputShowed: false,
      inputVal: '',
      logs: [],
      time: '12:01',
      customerId: ''
    }
  },

  created () {
  }
}
</script>

<style scoped lang="scss">
@import 'index';
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
